<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>
    <script src="https://unpkg.com/vue@2"></script>
    <title>千千音乐</title>
</head>
<body class="bg-[#1f1f1f]">
    <div id="app" class="relative">
        <h3 class="text-[40px] text-red-600 absolute inset-x-0 mx-auto w-fit top-[-100px]">比较好的唱片效果（hover效果）</h3>
        <section class="w-[1200px] mt-[200px] bg-[#1f1f1f] mx-auto">
            <header class="flex justify-between items-center mb-[20px]">
                <h3 class="text-[28px] text-[#f8f8f8]">秀动发行</h3>
                <a href="#" target="_self" class="text-[14px] text-[#909399] hover:text-[#c71721]">更多</a>
            </header>
            <main>
                <ul class="flex justify-between">
                    <li v-for="item in list" :key="item.id">
                        <a :href="item.href" class="block">
                            <div class="w-[224px] h-[192px] relative group/cover mb-[10px]">
                                <img :src="item.coverImg" class="block size-[192px] relative z-[2]"/>
                                <img :src="diskImgUrl" class="absolute inset-y-0 my-auto right-0 z-[1] size-[180px] translate-x-[-10px] group-hover/cover:translate-x-[6px] transition-[translate] duration-350 ease-in-out"/>
                            </div>
                            <div class="flex flex-col gap-[4px]">
                                <p class="text-[#f8f8f8]">{{ item.songName }}</p>
                                <p class="text-[14px] text-[#909399]">{{ item.singerName }}</p>
                                <p class="text-[14px] text-[#909399]">发行时间：{{ item.publicDate }}</p>
                            </div>
                        </a>
                    </li>
                </ul>
            </main>
        </section>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    list: [],           // 唱片列表
                    diskImgUrl: '/assets//disk_pic_album.358bdc5.png',
                };
            },
            mounted() {
                const assets = [
                    {
                        id: 1,
                        coverImg: '/assets/ChAKCGcvGguAHYU4AAUBwHBATAI383.jpg',
                        songName: 'Nights Are Lonely',
                        singerName: 'Rain Dogs',
                        publicDate: '2023-02-10',
                        href: '#',
                    },
                    {
                        id: 2,
                        coverImg: '/assets/ChAKFGbuvXaAOGGSABfin6HjSkg626.jpg',
                        songName: '刮风季',
                        singerName: '杨皮鹏',
                        publicDate: '2024-09-26',
                        href: '#',
                    },
                    {
                        id: 3,
                        coverImg: '/assets/ChAKCGbuldOAI0lqAAQqUjT-YVU214.jpg',
                        songName: '子宫Womb',
                        singerName: '明暗MING / Sin',
                        publicDate: '2024-09-25',
                        href: '#',
                    },
                    {
                        id: 4,
                        coverImg: '/assets/ChAKFGby3RCAGtgpAAJ5NDjMhq4669.jpg',
                        songName: '受够(New Vocal Ver.)',
                        singerName: 'STARENERGY女子组',
                        publicDate: '2024-09-28',
                        href: '#',
                    },
                    {
                        id: 5,
                        coverImg: '/assets/ChR47GffffqAHZ7cAALhHSMPrEw324.jpg',
                        songName: '祛魅又赋寐',
                        singerName: '王新也',
                        publicDate: '2026-04-11',
                        href: '#',
                    },
                ];
                this.list.push(...assets);
            }
        })
    </script>
</body>
</html>